<template>
  <el-card class="box-card" shadow="hover" :body-style="{ padding: '5px' }" style="height: 323px;">
    <template #header>
      <div class="rjfl">
        <span class="rjfl-title">游戏资讯推荐</span>
        <span class="rjfl-more" @click="gotoRouter('/information/list.html', $router, {firstId: 386,secondId: 415,thirdId: 493,type: 493,param: '386_415_493'}, 'information-list')"
          >更多
          
        </span>
      </div>
    </template>
    <div class="zx" v-for="(it, i) in data.slice(0,6)" :key="i" @click="gotoDetail(it.id)" @mouseover="cur=it.id">
        <div class="zx-open" v-if="it.id===cur">
          <span class="mg1">[{{ it.thirdStageName||'未知' }}]</span>
          <span class="it-title mg2" v-if="it.title" :title="it.title"  @click="gotoInfoDetail(it.id)">{{ it.title }}</span>
          <span class="mg3" v-if="it.createTime">{{ it.createTime }}</span>
        </div>
        <div v-else>
          <span>[{{ it.thirdStageName||'未知' }}]</span>
          <span class="it-title" v-if="it.title" :title="it.title">{{ it.title }}</span>
          <span v-if="it.createTime">{{ it.createTime }}</span>
        </div>
        
      <!-- <div >
        
      </div> -->
      <!--  -->
    </div>  
  </el-card>
</template>

<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = ref(useRouter());
const gotoDetail = (id) => {
  router.value.push({
    name: "information-detail",
    params: { id: id },
  });
};
const gotoInfoDetail = (id) => {
  router.value.push({
    name: "information-detail",
    params: { id: id },
  });
};
const gotoInfo = () => {
  let obj = {
    name: "游戏资讯",
    router: "/information/list.html",
    routerName: "information-list",
    params: {
      firstId: 386,
      secondId: 415,
      thirdId: 493,
      type: 493,
      param: "386_415_493",
    },
  };
  ('/information/list.html', $router, {
      firstId: 386,
      secondId: 415,
      thirdId: 493,
      type: 493,
      param: "386_415_493",
    }, 'information-list')
};
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});
const cur = ref(props.data[0].id)
// const it = ref({
//   name: "梦想世界",
//   icon: "https://placeholder.idcd.com/?w=72&h=72&text=72x72",
//   id: "",
// });
</script>

<style lang="less" scoped>
.zx {
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  margin: 6px 10px;
  span:first-child {
    font-size: 14px;
    font-weight: 400;
    color: #93999e;
    line-height: 14px;
    vertical-align: super;
    cursor: pointer;
    &:hover {
      color: @link-color;
    }
  }
  span:nth-child(2) {
    margin: 0 10px;
    font-size: 14px;
    font-weight: 400;
    color: #1d2127;
    line-height: 25px;
    cursor: pointer;
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    &:hover {
      color: @link-color;
      // text-decoration: underline;
    }
  }
  span:last-child {
    font-size: 14px;
    font-weight: 400;
    color: #93999e;
    line-height: 14px;
    cursor: pointer;
    vertical-align: super;
  }
  &-open {
    width: 100%;
    // height: 100px;
    background: #eee;
    padding: 15px;
    .mg2 {
      font-size: 25px!important;
    }
    .title {
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #F54446;
      line-height: 20px;
      margin-bottom: 8px;
    }
    .disc {
      font-size: 14px;
      color: #545759;
      line-height: 20px;
    }
  }
}
.rjfl {
  display: flex;
  justify-content: space-between;
}
.rjfl-title {
  font-size: 20px;
  font-weight: 600;
  color: #1d2127;
  line-height: 20px;
}

.rjfl-more {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #545759;
  line-height: 16px;
  cursor: pointer;
}
.it-title {
  display: inline-block;
  width: 326px!important;
}
</style>
